<template>
    <div class="app-container">
        <div class="block-1">网站信息</div>

        <div class="block">网站标题</div>
        <div class="item">
            <el-input v-model="form.siteTitle"></el-input>
        </div>

        <div class="block">favicon</div>
        <div>
            <el-image style="width: 100px;height: 100px" :src="form.favicon"></el-image>
        </div>

        <div class="block">头像</div>
        <div>
            <el-image style="width: 100px;height: 100px" :src="form.avatar"></el-image>
        </div>

        <div class="block">邮箱</div>
        <div class="item">
            <el-input v-model="form.mail"></el-input>
        </div>

        <div class="block">icp</div>
        <div class="item">
            <el-input v-model="form.icp"></el-input>
        </div>

        <div class="block">githubName</div>
        <div class="item">
            <el-input v-model="form.githubName"></el-input>
        </div>

        <div class="block">github</div>
        <div class="item">
            <el-input v-model="form.github"></el-input>
        </div>

        <div class="block">qq</div>
        <div class="item">
            <el-input v-model="form.qq"></el-input>
        </div>

        <div class="block">qqQrCode</div>
        <div>
            <el-image style="width: 100px;height: 100px" :src="form.qqQrCode"></el-image>
        </div>

        <div class="block">weixin</div>
        <div class="item">
            <el-input v-model="form.weixin"></el-input>
        </div>

        <div class="block">weixinQrCode</div>
        <div>
            <el-image style="width: 100px;height: 100px" :src="form.weixinQrCode"></el-image>
        </div>

        <el-button type="primary" @click="enterEdit">进入编辑</el-button>

        <el-dialog
            title="编辑网站信息"
            :visible.sync="dialogFormVisible"
            fullscreen
        >
            <div class="block-1">网站信息</div>

            <div class="block">网站标题</div>
            <div class="item">
                <el-input v-model="form2.siteTitle"></el-input>
            </div>

            <div class="block">favicon</div>
            <div>
                <Upload v-model="form2.favicon"></Upload>
            </div>

            <div class="block">头像</div>
            <div>
                <Upload v-model="form2.avatar"></Upload>
            </div>

            <div class="block">邮箱</div>
            <div class="item">
                <el-input v-model="form2.mail"></el-input>
            </div>

            <div class="block">icp</div>
            <div class="item">
                <el-input v-model="form2.icp"></el-input>
            </div>

            <div class="block">githubName</div>
            <div class="item">
                <el-input v-model="form2.githubName"></el-input>
            </div>

            <div class="block">github</div>
            <div class="item">
                <el-input v-model="form2.github"></el-input>
            </div>

            <div class="block">qq</div>
            <div class="item">
                <el-input v-model="form2.qq"></el-input>
            </div>

            <div class="block">qqQrCode</div>
            <div>
                <Upload v-model="form2.qqQrCode"></Upload>
            </div>

            <div class="block">weixin</div>
            <div class="item">
                <el-input v-model="form2.weixin"></el-input>
            </div>

            <div class="block">weixinQrCode</div>
            <div>
                <Upload v-model="form2.weixinQrCode"></Upload>
            </div>

            <el-button type="primary" @click="editSetting">保存</el-button>
        </el-dialog>

    </div>
</template>

<script>
import Upload from '@/components/Upload.vue'
import { getSetting, editSetting } from '@/api/setting'
import { server_URL } from '@/urlConfig'
export default {
    name: 'Setting',
    components: {
        Upload
    },
    data() {
        return {
            form: {
                avatar: '',
                favicon: '',
                github: '',
                githubName: '',
                icp: '',
                qq: '',
                qqQrCode: '',
                siteTitle: '',
                weixin: '',
                weixinQrCode: '',
                mail: '',
            },
            form2: {
                avatar: '',
                favicon: '',
                github: '',
                githubName: '',
                icp: '',
                qq: '',
                qqQrCode: '',
                siteTitle: '',
                weixin: '',
                weixinQrCode: '',
                mail: '',
            },
            dialogFormVisible: false,
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        fetchData() {
            getSetting().then(res => {
                this.form = res.data
                // this.form.avatar2 = server_URL + this.form.avatar
                // this.form.favicon2 = server_URL + this.form.favicon
                // this.form.qqQrCode2 = server_URL + this.form.qqQrCode
                // this.form.weixinQrCode2 = server_URL + this.form.weixinQrCode

                this.form2 = {...this.form}

                console.log('form', this.form)
                console.log('form2', this.form2)
            })
        },
        enterEdit() {
            this.dialogFormVisible = true
        },
        editSetting() {
            editSetting(this.form2).then(() => {
                this.dialogFormVisible = false
                this.fetchData()
                this.$message({
                    message: '保存成功',
                    type: 'success'
                })
            })
        },
    }
}
</script>

<style scoped lang="scss">
.block-1{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}
.block{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
.item{
    margin-bottom: 15px;
    width: 500px;
}
</style>
